在angular组件中导入js
在Angular组件中导入JS可以通过以下步骤完成：
- 在Angular项目的根目录下创建一个名为"assets"的文件夹（如果不存在）。
- 将你想要导入的JS文件（例如example.js）复制到assets文件夹中。
- 在组件的 TypeScript 文件中引入 Angular 的 Renderer2 服务：
- 在组件的 TypeScript 文件中引入 Angular 的 Renderer2 服务：
- 在组件的构造函数中注入 Renderer2 服务：
- 在组件的构造函数中注入 Renderer2 服务：
- 在组件的 ngOnInit 方法中使用 Renderer2 创建一个 script 元素并将其添加到文档中：
- 在组件的 ngOnInit 方法中使用 Renderer2 创建一个 script 元素并将其添加到文档中：
这样，当该组件被实例化时，将会动态地在页面中添加一个带有指定 JS 文件路径的 script 标签，从而实现了在 Angular 组件中导入 JS 文件的功能。
这种方法的优势是可以灵活地控制脚本的加载时机和位置。这在需要根据特定条件动态加载不同的脚本或在特定组件中使用特定的脚本时非常有用。
对于云计算领域，腾讯云提供了一系列与前端开发、后端开发、云原生、网络通信、网络安全、人工智能等相关的产品和服务。你可以参考腾讯云官网的相关文档和产品介绍来深入了解这些内容。以下是一些腾讯云相关产品和介绍链接的例子：
- 云服务器（CVM）：提供稳定可靠的云端计算资源，适用于各种场景。了解更多：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL：基于腾讯云的高性能 MySQL 数据库服务，提供丰富的功能和灵活的扩展能力。了解更多：https://cloud.tencent.com/product/cdb_mysql
- 人工智能机器翻译（TMT）：提供高质量、多语种的机器翻译服务，支持各种应用场景。了解更多：https://cloud.tencent.com/product/tmt
请注意，以上链接仅作为示例，具体的产品选择和链接可能需要根据实际需求进行调整。
相关·内容
1回答
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>test website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="sty
浏览 3提问于2017-09-25得票数 1
我试图在一个使用<mat-form-field>的角度项目中使用Material2，但我碰到了一堵墙。
获取下面的错误消息。
Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Com
浏览 5提问于2018-01-04得票数 94
回答已采纳
1回答
嘿，各位，我有个问题要问2角路由：
我有这个应用程序组件(正常工作)
import {Component, provide, bootstrap} from 'angular2/angular2';
import {HTTP_PROVIDERS} from "angular2/http";
import {Factory} from './factory';
import {HallService} from './hall.service';
import {HallDetail} from './hall.detail
浏览 2提问于2016-08-27得票数 0
回答已采纳
2回答
角2测试-无法创建组件
、、、
我的应用程序有很多模块，有许多组件和服务以及其他Angular2功能。
现在，我正在尝试使用TestBed方法创建一个带有茉莉花+业力的单元测试。
我在揭示概念的证据时遇到了一个错误。我为我的一个组件创建了一个测试，如下所示：
let myCompServiceStub = {} as MyComponentService;
let routerStub = {} as Router;
let globalServiceStub = {} as MyGlobalService;
describe('MyComponent', () => {
let compo
浏览 0提问于2017-01-05得票数 1
角5-
以下是npm模块(package.json)-
"@angular/animations": "^5.0.0",
"@angular/cdk": "^5.0.0-rc.2",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/form
浏览 5提问于2017-12-05得票数 27
回答已采纳
我有大量使用ReactiveForms的组件，但是当我尝试访问它们时，我得到的是“”。
奇怪的是，这不是在运行"ng serve“时发生的，而是在运行"ng serve -aot”时发生的，甚至在我使用"ng build“部署时也是如此。
有人知道这是怎么回事吗？
这是完整的回溯
core.es5.js:1020错误: Uncaught (为了承诺)：Error：！错误:没有NgForm的提供者！在ReflectiveInjector_.webpackJsonp.../../../core/@angular/core.es5.js.ReflectiveInjector
浏览 3提问于2017-09-19得票数 6
1回答
我正在尝试在Angular 2中实现一个Datepicker。但是由于这个库没有加载，我得到了模板解析错误'material-datepicker‘不是一个已知的元素：
我的System.config.js如下所示。
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'app',
'@angular/core': 'npm:@
浏览 2提问于2016-11-13得票数 0
1回答
我用的是带有引导带4的角度CLI。经过一些痛苦的设置后，我已经准备好了。一旦“ng serve”完成了内存中的构建，我打开了应用程序，在检查了一些元素之后，我注意到引导类多次出现。
在检查<head>之后，我可以看到有<style>元素(3x)，它们都包含引导类。
我的应用程序设置如下：
- SRC
|- APP
| |- TOOLBAR
| | |- toolbar.component.scss
| |- app.component.scss
|- app.scss
|- variables.scss
在var
浏览 0提问于2017-05-19得票数 0
回答已采纳
2回答
我已经安装了命令：
npm install --save @angular/material @angular/cdk
我加入了app.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
Package.json
"dependencies": {
"@angular/animations"
浏览 1提问于2018-05-09得票数 1
回答已采纳
我不能导入原始组件使用gulpfile.js，但在哪里我可以导入其他第三方组件。
我得到了未知源错误。请帮帮忙。
我必须更改primeng.js中的路径吗？
Layout.cshtml：
<script src="js/primeui-ng-all.js"></script>
<script>
System.config({
packages: {
'app': {
format: 'register',
浏览 0提问于2016-04-19得票数 1
我尝试在angular2 (2.0.2)和systemjs模块加载器中使用ng闪电(0.24.0)。包加载是可以的，但是当我试图在ngModule中调用ng闪电模板时，我得到了模板解析错误。从单个组件来看，它是workink，但在ngModule内部却并非如此。
我的package.json
"dependencies": {
"@angular/common": "~2.0.2",
"@angular/compiler": "~2.0.2",
"@angular/core": "~2.0.
浏览 5提问于2016-10-18得票数 2
回答已采纳
我有一个js文件action.js，我想使用javaScript的角度。因此，当我读到它时，它说js文件必须放在资产中，路径必须在angular.json中的脚本数组中引用，然后在ts和ngOnInit中使用声明，但这会引发一个错误，即禁止访问js文件旁边的函数是未定义的，并且启用了MIME类型检查。
这是我的js文件函数
function Di(){
console.log('ffffffffffffff');
}
the app.component.ts
import { AstMemoryEfficientTransformer } from '@angu
浏览 5提问于2022-11-11得票数 0
我有一个angular2应用程序，它在运行时试图从错误的URL加载资源。
它应该在：上查找它，但是它应该在：上查找它共享的单词不应该出现在路上。
我在angular2中有这样的结构：
app
---services
------angular2-jwt.ts
---shared
------country
---------country.service.ts
在country.service.ts中，我引用angular2-jwt.ts，如下所示：
import {AuthHttp} from '../../services/angular2-jwt';
正如您所看到的，这是
浏览 2提问于2016-02-10得票数 4
回答已采纳
我正在做angular快速入门教程。所以我只是英雄教程，在其网站上指定了angular2快速入门。这对我来说运行得很好。它绑定静态数组数据并执行CRUD。但是现在我想学习如何调用web API方法从数据库中获取数据。
所以我在服务的getHeroes()方法中调用webapi方法，并从组件的初始化method-ngOnInit()中调用该方法，但它给出了如下错误。如果我错了，请改正。
在angular2中从我的服务调用Web api控制器时遇到此错误
例外：
Error: Uncaught (in promise): No provider for Http! (DashboardCompon
浏览 6提问于2016-09-22得票数 0
通过在反应形式中使用此方法
<form #branchForm [formGroup]='branchForm'>
我犯了一些错误
Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("
<div class="box">
<div cla
浏览 1提问于2018-12-07得票数 2
回答已采纳
3回答
我有一个很简单的5角管道
import { Pipe, Injectable } from '@angular/core';
@Pipe({
name: "default"
})
@Injectable()
export class DefaultPipe {
transform(value: string, fallback: string): string {
let image = "";
if (value) {
image = value;
} e
浏览 3提问于2018-06-01得票数 3
回答已采纳
嗨，我刚接触到“棱角”和“火基”，从今天早上开始我一直在为一个简单的代码而挣扎，我已经搜索了这个问题，也没有找到任何对我有用的解决方案(有时我甚至不理解它，我在这里是一个真正的初学者)，我在控制台上遇到的错误如下：
未知错误:由模块'AppModule‘导入的意外值'AngularFireDatabase’。请添加一个@NgModule注释。在syntaxError (compiler.js:485) at eval (compiler.js:15225) at Array.forEach () at CompileMetadataResolver.getNgModuleMe
浏览 0提问于2017-12-25得票数 7
回答已采纳
在我添加angular-route之前，我的应用程序正在使用productlistview正常运行。因为我想使用多个视图，所以我在index.html中添加了productDetailsView.html，然后添加了ng-view。在编译时，我得到的只是索引"Acme Product Management“中的标题，控制台上没有错误。检查我的代码。 module app {
// var views = angular.module('views', []);
var main = angular.module("productManagement
浏览 27提问于2020-03-25得票数 0
我的想法已经用完了。我想在角度库的一个组件中使用(ngModel)输入，所以我需要在库的模块中导入FormsModule才能使用它。我做到了。我有一个演示项目，我调用这个库的一个组件来测试它，但是我得到了标题中的错误。有人知道怎么做吗？
我还尝试在演示角项目中的一个组件中导入FormsModule中的app.module，它可以工作。但是，在图书馆的组成部分中实现这一点是不可能的。
错误：
core.js:6162 ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https:/
浏览 8提问于2021-03-22得票数 1
回答已采纳
我得到'Uncaught (in promise)：Error: No provider for ComponentLoaderFactory!‘尝试访问导入引导程序ModalModule的组件时出错。
app.module.ts：
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [BrowserModule, RouterModule, ModalModule.forRoot()],
...
template.component.ts (发生错误的位置)：
imp
浏览 5提问于2017-11-14得票数 1
我正在尝试使用fileSaver.js ，但我遇到了麻烦。
我跑
npm install file-saver --save
npm install @types/file-saver --save-dev
因此，在package.json中，我有：
"dependencies": {
"@angular/animations": "4.1.0",
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0"
浏览 4提问于2017-09-07得票数 0
回答已采纳
我正在尝试创建一个使用errors的webapp应用程序，这个项目是没有错误地编译的。执行时，浏览器将显示一个空白页并返回此错误：
错误错误:未知(承诺)：错误: StaticInjectorError(AppModule)NgbDropdown -> ChangeDetectorRef：
StaticInjectorError(平台:核心)NgbDropdown -> ChangeDetectorRef：
NullInjectorError:没有ChangeDetectorRef的提供者！
错误: StaticInjectorError(AppModule)NgbDropdow
浏览 0提问于2019-04-18得票数 0
你好，以前我使用了角6，在迁移到角8之后，这是完成的，但有时它会给我带来错误。
main.js:11770 Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you
浏览 0提问于2019-11-11得票数 0
我正在尝试在我的Angular 2应用程序中使用。基本上，我有一个带有几个选项卡的仪表板。但是，当我渲染选项卡时，它就断了。以下是我的代码：
dashboard.html
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Dashboard</span>
</div>
<div clas
浏览 2提问于2016-02-11得票数 0
1回答
我正在升级到Angular 14。除了jest设置之外，一切都很好。由于我的角度14 libaries包括在构建，我必须使用jest-ESM支持。我的配置如下：
package.json
{
"name": "my-app",
"version": "0.0.1",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": &#
浏览 10提问于2022-09-14得票数 0
1回答
我让我的app.component工作在角度2，但我似乎不能得到一个测试一个工作。它不能通过“装载.”在我的html中留言。有人能检查一下我的代码，看看我哪里出错了吗？我以为我完全遵循了我正在观看的课程，但似乎什么也没有出现。
app.component.ts：
import {Component} from '@angular/core';
import {MyComponent} from './my-component.component';
@Component({
selector: 'my-app',
template: `
浏览 2提问于2016-06-18得票数 0
回答已采纳
以角6反应形式的ck编辑器不工作。得到一个错误
没有名称为“description”的窗体控件的值访问器
我在我的app.module.ts和当前页面中导入了ck编辑器。但我还是会犯同样的错误。下面是我的cms-add html页面：
<form [formGroup]="addCMSForm" (ngSubmit)="onSubmit()">
<div class="box-body">
<div class="col-xs-12"&g
浏览 1提问于2018-08-20得票数 1
1回答
我是angular的新手，但我们正在为弹出功能实现Angular材料。
在app.module.ts中，我使用以下导入语句导入MatButtonModule和MatDialog模块。
import {MatButtonModule} from "@angular/material/button/typings/button-module";
import {MatDialogModule} from "@angular/material/dialog/typings/dialog-module";
由于某些原因，当我使用ng build进行编译时，我得到了下面的
浏览 0提问于2020-05-05得票数 0
我是一个基于Angular的UI项目的新手，我使用vscode生成了两个新组件用于该项目。然而，每当我将我的更改推送到git(bitbucket)时，我总是收到错误，而当我在我的机器上构建项目时，这些错误并不存在。我需要在哪里提供HttpClient/HttpClientModule，以便这些新组件可以使用HttpHandler？
我已经在app.module.ts和新组件本身上为HttpClientModule和HttpClient添加了提供程序。
modal-wiped-all.component.ts
import { Component, OnInit } from '@ang
浏览 1提问于2018-12-27得票数 6
在我的Angular 7项目中，在src文件夹中，我有一个site.js文件，其中保存了一些javascript函数。 这个文件在angular.json中被引用(在脚本部分下)，看起来一切正常。在index.html内部，我看到来自site.js的所有函数都是可用的。 如何从angular component运行任何函数？我的site.js似乎被组件忽略了。 谢谢
浏览 23提问于2019-01-25得票数 0
我遵循了答案中的说明，并让它在与ng serve一起服务的独立应用程序中工作。
但是在构建和部署应用程序时，原始样式和主题并不是捆绑在一起的。Primeng控件显示时没有样式，看起来很奇怪。
构建是用node --max-old-space-size=4096 "./node_modules/@angular/cli/bin/ng" "build" "--prod" "--aot" "--env=test" "--sourcemap"完成的
package.json内容：
{
"nam
浏览 0提问于2018-09-20得票数 0
回答已采纳
我正在尝试制作一个包含我所有UI组件的自定义模块。我需要它与角10以上兼容。我的图书馆的package.json如下所示：
{
"name": "myLibModule",
"version": "0.0.15",
"peerDependencies": {
"@angular/core": "^10.2.5",
"@angular/common": "^10.2.5",
"@angular/material
浏览 21提问于2022-04-12得票数 4
当我点击工具栏图标时，我正试图使用棱角的材料来打开侧导航。在我试着打开导航栏之前，一切都很好，我得到了错误：
由模块‘src/app/app.module.ts’导入的意外指令'MatDrawer in @角/MatDrawer/sidenav/index.d.ts‘。请添加一个@NgModule注释。
以下是国家预防机制模块(package.json)：
"@angular/animations": "^9.1.11",
"@angular/cdk": "^9.2.4",
"@angular/common
浏览 2提问于2020-07-05得票数 5
回答已采纳
1回答
我创建了一个npm模块并成功地发布了它。现在我正在努力想办法把它包含到我的应用程序中。我是用webpack来编译的，似乎做得不对。它是一个角万向装置。
角万向盘的回购是:
这里是模块的git：
在我的app.module.ts项目中
import { BoxModule } from 'ng-universal-ui-kit';
@NgModule({
imports: [BoxModule ],
declarations: [ AppComponent, HomeView ],
exports: [ AppComponent ]
})
export cla
浏览 3提问于2017-09-17得票数 0
1回答
在我的角组件中显示图表-js有一个问题:没有显示条形图，我把它作为html呈现：
<div _ngcontent-tkd-c175="" class="p-col-6">
<p-chart _ngcontent-tkd-c175="" type="bar">
</p-chart></div>
我的模块：
import { NgModule } from '@angular/core';
import { CommonModule } from '@ang
浏览 5提问于2022-01-11得票数 1
1回答
角材料模块不被识别
、、、
我在这个错误上浪费了很多时间，我要开始新的angular5项目，我想使用角材料。我在一个material.module.ts文件中导入并导出了材料模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { MatIconModule,MatButtonModule,MatSidenavM
浏览 1提问于2018-04-14得票数 2
回答已采纳
我对angularjs非常陌生，我打算在项目中使用angularjs，所以我认为这些步骤应该是这样的
1. import angular.js 2. import bootstrap.js 3. import bootstrap.css
但是我发现在why shall I use angular-ui bootstrap rather than import bootstrap.js directly?中有一个angular-ui bootstrap module，所以我测试了以两种方式创建下拉菜单，它们都工作得很好，我想角用户界面应该是推荐的方法，但是angular-ui bootstrap
浏览 4提问于2015-01-26得票数 0
2回答
对不起，这个问题可能已经问过了。但几个小时以来，我一直在努力找出我做错了什么。我想在父程序中显示子组件。但到目前为止，我还没有做到这一点。
routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import ...
const routes: Routes = [
浏览 5提问于2017-04-26得票数 0
回答已采纳
我一直试图在Navbar与折叠菜单和下拉链接使用引导4和角6，但不知怎的Navbar是不起作用的。我可以正确地看到元素，但它们的功能不像预期的那样。
我使用“ng安装引导程序”和引导依赖项( ng install jquery和ng install popper.js )通过角CLI安装了引导程序
我还包括了package.json和angular.json中的Bootstrap、jquery和angular.json
package.json
{
"name": "mean-course",
"version": "0.0.0&
浏览 3提问于2020-03-04得票数 0
在更新到RC6之后，我的应用程序在运行时遇到了一些问题。
由于官方示例，我更改了系统to。
但我仍然会遇到这样的编译错误："Module '"D:/Myproject/WebClient/node_modules/@angular/router/index"‘没有导出的成员’路由器_指令‘“。
看起来编译器采用默认的index.js文件，而不是umd包.编译是通过gulp任务完成的，有以下选项：
"module": "system", "moduleResolution": "node",
浏览 3提问于2016-09-01得票数 6
回答已采纳
4回答
我目前正在测试角阿尔法45，特别是路由，并通过实现参数路由问题。我已经为一个特定实体的详细视图创建了一个组件。
@Component({
templateUrl: 'app/components/projekt/projekt.detail.html',
directives: [FORM_DIRECTIVES]
})
export class ProjektDetailComponent {
id: string;
constructor(params: RouteParams){
this.id = params.get(&#
浏览 1提问于2015-11-06得票数 9
回答已采纳
4回答
通过模块导入多个角元件
、、、
我的棱角分明的项目正在增长，所以我想保持我的项目清洁。
我有一个角分量，它依赖于一个嵌套的角分量。
现在，我需要两个import语句来使用这些组件，这些组件没有彼此不能工作。
作为解决方案，我希望创建一个包含这两个组件的小角度模块，并将该模块导入到我的主app.module中。
在这样做之后，我得到一个错误，它声明小模块中的一个组件是不被识别的。
//app.module.ts
@NgModule({
imports: [BrowserModule, HttpModule, DictaatModule],
declarations: [AppComponent, Dictate
浏览 9提问于2016-09-19得票数 17
回答已采纳
1回答
我有一组react组件，我正尝试在Angular 2应用程序中使用它们。
下面是我尝试使用的主要React组件
import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer
浏览 52提问于2017-08-23得票数 11
我今天开始从角4.4.4升级到5.1.1。我已经升级了许多其他的软件包，依赖于角以及。由于上下文太少，我遇到了一个错误，我不知道从哪里开始。有没有其他人看到这个，知道问题出在哪里？
$ ng serve --aot=false
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-19T15:26:36.137Z
Hash: bf0b773d5dfafdd9133b
Time: 16934ms
chunk
浏览 4提问于2017-12-19得票数 37
回答已采纳
1回答
我将我的项目升级到了angular7，一切似乎都正常，除了一件事。我在运行时创建了一个组件，项目编译成功，但在浏览器中出现以下错误：
zone.js:2969 GET http://localhost:4202/app/buildingBlocks/html-outlet/html-outlet.component.scss
core.js:14597 ERROR Error: Uncaught (in promise): Failed to load app/buildingBlocks/html-outlet/html-outlet.component.scss
at resolvePr
浏览 0提问于2018-12-03得票数 1
我试图更新我的应用程序使用RC5，所以引导我的应用程序使用一个模块。
获取此错误：
当我点击错误并获得更多信息时，它会说：
Error: TypeError: Cannot read property 'type' of null at eval (http://localhost:3000/node_modules/@angular/compiler//bundles/compiler.umd.js:13673:45) at Array.forEach (native) at getTransitiveModules (http://localhost:3000/n
浏览 3提问于2016-08-19得票数 10
回答已采纳
我试图在package.json文件中使用一个新的依赖项，并在导入之前尝试导入组件文件，我试图使用npm安装或更新依赖项，但在package.json中添加新的依赖项后无法导入。
请查找现有的package.json文件内容，目前使用的版本是角6。
"dependencies": {
"@angular/animations": "^6.0.3",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3
浏览 0提问于2018-12-01得票数 0
2回答
我无法从'app/associate/abc.component.ts‘加载位于'app/shared/lookup/lookup.component.ts’的组件。
我的文件夹结构
误差
tsconfig
{
"compilerOptions": {
"outDir": "dist",
"target": "es5",
"module": "commonjs",
"moduleResolution&
浏览 0提问于2016-08-16得票数 0
1回答
我们的网站是一个现有的MVC网站，我们正在努力添加和替换一些部件的角2组件。我们没有一个完整的角度2应用程序来启动，所以我们只是使用引导启动我们的组件在我们想要的页面上。
我将package.json依赖项从"2.0.0-rc.1“更新到"~2.2.0”，现在有了最新的角2文件。我不能再使用从‘@转角/平台-浏览器-动态’导入{ bootstrap }，并启动我的组件:引导(MyCountComponent，HTTP_PROVIDERS，MyService)；。
搜索似乎已经更新，从‘@ platformBrowserDynamic().bootstrapModule(MyCo
浏览 1提问于2016-11-23得票数 0
回答已采纳
下面是用于连接到MongoDb的api.ts文件，我使用该文件从服务集合中获取数据并将其存储在结果中。
import { MongoClient } from 'mongo-client';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class mongoConnection {
constructor(private mongoClient: MongoClient) { }
getCo
浏览 3提问于2018-11-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
