捆绑后找不到角度模块文件答案

【问题标题】：angular module files are not found after bundling捆绑后找不到角度模块文件
【发布时间】：2021-08-18 16:28:06
【问题描述】：

目前我正在尝试将我的 Angular JS 项目迁移到 Angular (11+)。因为它是一个大项目，我想以混合模式引导 AngularJS 和 Angular，这样我就可以逐步升级。

在那之前我没有使用过 Webpack。创建 webpack 包并尝试加载应用程序后，我收到以下错误，即找不到某些 @angular 文件。例如：
GET https://localhost/learn/templates/0/node_modules/@angular/core/esm2015/src/core net::ERR_ABORTED 404（未找到）
尽管这些文件的路径是正确的，但我只发现它们缺少 .js 文件扩展名。
Error stack trace in 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']);
});

【问题讨论】：

标签： angularjs angular typescript webpack migration

【解决方案1】：

通过在主项目文件夹的终端中运行命令“npm i”来安装 node_modules。它会解决问题。

【讨论】：