在Angular 2项目中调用外部JavaScript文件,可以通过Webpack的配置来实现。以下是一个详细的步骤指南:
首先,确保你的Angular项目已经集成了Webpack。Angular CLI创建的项目默认使用Webpack,所以通常不需要额外安装。
将你需要的外部JavaScript文件添加到项目中。通常可以放在src/assets/js
目录下。
例如,假设你有一个外部JS文件external-script.js
,你可以将其放在src/assets/js/external-script.js
。
你需要在Webpack配置中告诉Webpack如何处理这个外部JS文件。可以通过修改angular.json
文件或直接修改Webpack配置文件来实现。
angular.json
配置在angular.json
文件中,你可以添加一个scripts
数组来指定需要加载的外部JS文件。
{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"scripts": [
"src/assets/js/external-script.js"
]
}
},
"test": {
"options": {
"scripts": [
"src/assets/js/external-script.js"
]
}
}
}
}
}
}
如果你需要更复杂的配置,可以直接修改Webpack配置文件。Angular CLI项目中的Webpack配置文件通常位于node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
。
你可以创建一个自定义的Webpack配置文件,并在angular.json
中引用它。
custom-webpack.config.js
:module.exports = {
plugins: [
new webpack.ProvidePlugin({
externalFunction: 'external-script.js'
})
]
};
angular.json
中引用这个自定义配置文件:{
"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
}
}
},
"test": {
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
}
}
}
}
}
}
}
一旦Webpack配置正确,你就可以在Angular组件中使用外部JS文件中的函数或变量。
例如,假设external-script.js
中有一个函数externalFunction
,你可以在组件中这样使用它:
declare const externalFunction: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ngOnInit() {
externalFunction();
}
}
declare
关键字来声明这些函数或变量。领取专属 10元无门槛券
手把手带您无忧上云