有/是一个项目，原来是在angular2下写的。对于生产，他们使用了一套拐杖，可以选择 aot（在最坏的情况下大约需要 2 分钟）。但是在添加其他包时存在很多问题，与此相关的是，随着 Angular 4 和 5 的出现，更新和从拐杖转移到 Angular 提供的开箱即用标准的问题出现了。
但一切都变得不那么快乐了。jit build option (ng build) 几乎没有手鼓。
aot 变体存在问题。这是通过更新软件包来决定的 - 之后它被组装，因为事实证明那里有问题 - 它不起作用。
调试器说：没有为“AppModule”找到 NgModule 元数据。某处缺少某些东西。
.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"
]
}索引.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';
解决方案原来是
在编译器看来，最初的版本显然不是动态的……自 4.5 版以来发生了一些变化……与 eng 2 相比，构建结果非常漂亮且小巧。