目前我正在尝试将angular js项目迁移到angular(11+)。因为这是一个大型项目,我想以混合模式引导angularjs和angularjs,这样我就可以逐步升级所有东西。
在那之前我没有用过webpack。在创建webpack包并尝试加载应用程序后,我发现以下错误,一些@angular文件找不到。例如:
得到https://localhost/learn/templates/0/node_modules/@Angular /核心/esm2015/src/core网络::错误404(未找到)
虽然这些文件的路径是正确的,但我只发现它们缺少.js文件扩展名。
google chrome中的错误堆栈跟踪
这是我的webpack.config.js
module.exports = {
entry: "./main.ts",
output: {
filename: "./angular/bundle/bundledProjectModule.js"
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
rules: [
//all files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'
{ test: /\.tsx?$/, use: "ts-loader" }
]
}
};
这是我的tsconfig.json:
{
"compilerOptions": {
"baseUrl": "",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "ESNext",
"target": "es5",
"sourceMap": true,
"moduleResolution": "node",
"lib": ["dom", "es2016", "es2019.object"]
},
"typeRoots": [
"./node_modules/@types"
],
"exclude": [
"node_modules"
]
}
这是我的main.ts文件:
import 'angular';
import 'angular-resource';
import 'angular-animate';
import 'angular-aria';
import 'angular-messages';
import 'angular-sanitize';
import 'angular-route';
import './learn.main'
import './angular/generalComponents/button';
import './angular/generalComponents/cell-items';
import './angular/generalComponents/filter/search-bar';
import './angular/generalComponents/filter/date';
import './angular/generalComponents/view-fields';
import './angular/generalServices';
import './modules/project';
import './modules/project/overview/filter';
import './modules/project/overview/table';
import './modules/project/overview';
import './polyfills';
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {UpgradeModule} from '@angular/upgrade/static';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
// Override Angular bootstrap so it doesn't do anything
ngDoBootstrap() {
}
}
// Bootstrap using the UpgradeModule
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
console.log("Bootstrapping in Hybrid mode with Angular & AngularJS");
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['learn']);
});
1条答案
按热度按时间wkftcu5l1#
通过在主项目文件夹中的终端中运行命令“npmi”来安装node_模块。这将解决问题。