0

Был\есть проект писали его изначально под ангуляром2. для продакшина использовали набор костылей который делал вариант аот(собиралось это дело минуты 2 в худшем случае). Но было куча проблем при добавлении иных пакетов, в связи с чем как вышел ангуляр4,а потом 5 - встал вопрос по обновлению и отхода от костылей к стандарту из коробки, который дает ангуляр.

Но все оказалось менее радостно. вариант сборки jit (ng build) завелся практически без бубна.

С вариантом aot возникли проблемы. решилось обновлением пакетов - после чего собралось, как оказалось что то там не так - не заработало.

В отладчике пишет: No NgModule metadata found for 'AppModule'. Что-то где-то не хватает.

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "mc.4.0",
    "ejected": false
  }, "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "app/main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"





      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
    }
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"

  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "genDir": "compiled",
    "strictMetadataEmit" : true,
    "skipMetadataEmit" : false

  }
}

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

index.html

<!doctype html>
<html>
<head>
  <base href="/">
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body >
<my-app style="height:100%;"></my-app>
</body>
</html>

app.component.ts

import {
  Component
} from '@angular/core';


@Component({
  selector: 'my-app',
  template: `<router-outlet></router-outlet>`

})
export class AppComponent {}

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { LoginComponent }   from './components/comp.login';
import { ClientComponent  }   from './components/comp.client';
import { MainComponent }   from './components/comp.main';
import { ProjectComponent }   from './components/comp.project';
import { AppComponent }   from './app.component';
import { DialogComponent } from './components/comp.addclient';
import {SettingsComponent} from './components/comp.settings';
import {CalendarComponent } from './components/comp.calendar';
import {AnalyticsComponent } from './components/comp.analytics';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule }   from '@angular/common/http';
import {ColorPickerModule} from 'ngx-color-picker';
import {MyDatePickerModule } from '../../node_modules/mydatepicker/dist/my-date-picker.module';
import {ServerString} from "./set/serverstring";
import { CookieModule } from 'ngx-cookie';
import { NguiAutoCompleteModule } from '@ngui/auto-complete';
import {NgxChartsModule} from '@swimlane/ngx-charts';
import {SoundService} from "./set/SoundService";





const appRoutes: Routes = [
    { path: 'login/:pageToGo', component: LoginComponent },
    { path: 'login', redirectTo: 'login/main', pathMatch: 'full'},
    { path: 'main', component: MainComponent },
    { path: 'client/:id', component: ClientComponent },
    { path: 'project/:id', component: ProjectComponent },
    { path: 'settings', component: SettingsComponent },
    { path: 'calendar', component: CalendarComponent },
    { path: 'analytics', component: AnalyticsComponent },
    { path: '**', redirectTo: 'main', pathMatch: 'full'}
];


@NgModule({
    imports:      [  MyDatePickerModule, BrowserModule, FormsModule, HttpClientModule,
                     RouterModule.forRoot(appRoutes),CookieModule.forRoot(),
                     ColorPickerModule,
                     BrowserAnimationsModule, NguiAutoCompleteModule
          , NgxChartsModule
    ],
    declarations: [ AppComponent, LoginComponent, MainComponent, ClientComponent, ProjectComponent, DialogComponent,
        SettingsComponent, CalendarComponent , AnalyticsComponent],
    bootstrap:    [ AppComponent ],
    providers: [ServerString, SoundService]
})
export class AppModule {

}

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { enableProdMode } from '@angular/core';
import { environment } from '../environments/environment';

if (environment.production) {
  enableProdMode();
}
enableProdMode();
console.log('Running ng' +
  '5^ compiled');





const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

polifills.ts

import 'core-js/es7/reflect';
import 'web-animations-js';
import 'zone.js/dist/zone';  

1 ответ 1

0

Решение как оказалось таково

  1. измененить в main.ts

platformBrowserDynamic().bootstrapModule(AppModule)
// для простоты дебага
.catch(err=>console.error(err))
;

вместо

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Изначальный вариант видимо казался компилятору нединамичным... что-то с 4,5 версии изменилось... результат сборки в сравнении с анг 2 очень красивый и маленький.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.