首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular-cli: ng g组件在app.module中生成错误的导入路径(反斜杠

Angular CLI是一个用于快速搭建和开发Angular应用的命令行工具。ng g组件是Angular CLI提供的一个命令,用于生成一个新的组件。

在使用ng g组件命令时,如果在app.module中生成错误的导入路径,可能是由于文件路径配置不正确导致的。解决这个问题的方法是确保生成的组件文件被正确地导入到app.module中。

首先,需要确认生成的组件文件是否位于正确的目录下。默认情况下,ng g组件命令会将生成的组件文件放置在src/app目录下。如果你的组件文件位于其他目录下,需要手动修改导入路径。

其次,需要检查生成的组件文件的文件名和类名是否正确。生成的组件文件的文件名应该与组件类名相同,并且以.component.ts为后缀。例如,如果生成的组件类名为MyComponent,那么生成的组件文件应该命名为my.component.ts。

最后,需要在app.module中正确地导入生成的组件文件。在app.module中,可以使用相对路径或绝对路径来导入组件文件。如果生成的组件文件位于与app.module相同的目录下,可以使用相对路径导入。如果生成的组件文件位于其他目录下,可以使用绝对路径导入。

以下是一个示例,假设生成的组件文件位于src/app/my.component.ts:

代码语言:txt
复制
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my.component'; // 导入生成的组件文件

@NgModule({
  declarations: [
    AppComponent,
    MyComponent // 将生成的组件添加到declarations中
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种灵活可扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各种应用场景。

腾讯云对象存储(COS)是一种高可用、高可靠、低成本的云存储服务,适用于存储和处理各种类型的数据,包括图片、音视频、文档等。

更多关于腾讯云云服务器和对象存储的信息,请访问以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular CLI 简介

首先我针对上面的my-app6执行ng lint: 没有问题. 然后我故意弄出来几处错误/不规范写法: 然后再执行ng lint: 可以看到这些错误都被详细列了出来....生成了两个文件和component一样, 也app.module进行了声明....然后把-d去掉, 真实生成文件: ng g s order-data 可以从源码管理看到, 只生成了两个文件, 并没有app.module里面注册: 当然可以在这里写代码把刚才生成service...: ng g c admin ng g c admin/email -m admin ng g c admin/user -m admin 实际上后两个命令-m参数可以去掉, 因为已经指定了路径 admin...首先修改上一个例子代码: 执行ng build: 可以看到生成了这些文件. 把dist里面的index.html格式化一下看看: 可以看到它引用了生成5个js文件.

6K110

Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

对应国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较好推荐国际官网,这边API更新很及时 ---- angular-cli.../app/app.module'; // 环境配置文件,可以写入接口路径什么。。dev,prod各一份 import { environment } from '....:组件逻辑处理 // 导入装饰器:装饰器可以理解为一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core';...'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...哦,还少说了服务这块,看着安排,这些说完之后就直接开搞一些小玩意,比如自定义管道,上传组件,自定义指令这些。。。发现文章有错误,或者有更好讲解,请留言指出,我会及时修正,谢谢!

6.2K20

angular4实战(1) angular-cli

本章主要关注,ng new 这条命令。在下载好angular-cli之后,通过命令行输入ng help可以获得angular-cli指令详细介绍。 ?...—prefix 默认是app,可以选择改成其他,如果不设置,那么项目生成组件选择对象就是app开头,即: ?...—routing angular生成项目默认是不带路由,而路由但也应用基本上是必备模块,因此在生成项目时需添加此属性。...我这边都是没有做inline设置,个人不喜欢这种把其他东西柔脚本里方式。 组件生成 之前用angularjs时候,有自己写生成组件脚本,换到4之后,发现天生带这个功能,很喜欢。...比如生成一个名为stones组件,只需运行命令: ng g component stones 就ok了,然后会依照之前ng new项目时配置app目录下生成相应组件,并自动加入到依赖,非常方便

64420

Angular CLI 常用终端操作命令

component home/component/my-new-component //相对生成组件生成位置项目的根目录 src/app/home/component(指令其他等等都可以用该方式生成...该--routing选项还会生成与模块名称相同默认组件。 您可以创建或初始化项目时使用该--routing选项ng new来创建app-routing.module.ts文件。...--environment=dev--environment=prod 可以 angular-cli.json 该文件配置映射编译环境路径 //angular-cli.json...//cmd命令 //编译 angular-cli.json 文件配置 传参数来编译不同服务端文件如执行下面命令编译是json文件 envuronments.loca 配置文件路径...更多angular-cli配置 https://github.com/angular/angular-cli/wiki 组件| ng g component my-new-component 指令|

2.1K40

Angular CLI 使用教程指南参考

npm install -g angular-cli Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli...将自动完成功能添加到ng命令shell ng doc 命令 描述 ng doc 浏览器打开Angular文档并搜索当前关键字 ng e2e 命令 描述 ng e2e 使用...ng g module my-module Route ng g route my-route当前已禁用 构建组件都会使用自用目录,除非 --flat 单独指定....参数 描述 --flat 不在自用目录内创建代码 --route= 指定父路由.仅用于生成组件和路由.默认为指定路径....pathN参数是一个有效JavaScript路径,如“users [1] .userName”。 该值将被强制转换为正确类型,或者如果类型无法强制,则会抛出错误

3K50

Angular学习(02)--Angular-CLI命令

还有一些没用过,也不大清楚命令,后续再补充 常见命令 其实,这么多命令,我最常使用,就只有 ng g 命令,也就是 generate 命令,用来生成各种类型文件代码,比如生成组件生成服务等。...组件声明相应 declarations 列表。...先介绍第一种方式,使用命令时,加上一些选项配置: 选项配置 说明 --export=true|false 生成组件在对应模块文件,是否自动 exports 列表声明该组件好对外公开,默认值 false...ng g directive 这个是创建指令命令,组件其实是指令一种,所以,上面介绍关于组件命令各种选项配置,指令这里也基本都可以使用,这里不列举了,清楚相关默认文件来源后,不懂,去翻阅下就可以了...ng g service 这个是创建服务类命令,支持选项配置参考上面几种命令。 默认生成有两份文件,ts 和 测试文件。

2.6K10

使用Angular CLI生成 Angular 5项目

Angular CLI 官网: https://github.com/angular/angular-cli 安装angular cli: npm install -g @angular/cli 不过首先要确保您安装了比较新版本...查看angular-cli.json, 可以文件下方看到采用是scss样式文件: ? 这样, 以后生成component默认样式文件就是scss了....如果想手动为项目配置路由的话, 还是需要一些步骤, 所以可以使用这个参数直接生成带路由配置项目. 看一下项目路由文件: ? 再查看一下app.module: ?...综上, ng new 这些参数可以在生成项目的时候作为命令参数联合使用, 其中有一些参数也可以项目生成以后通过修改angular-cli.json文件来做修改....然后我故意弄出来几处错误/不规范写法: ? 然后再执行ng lint: ? 可以看到这些错误都被详细列了出来. 把格式化参数加进去: ? 可以看到现在lint结果显示更直观了一些.

1.9K30

Angular 2.x折腾记 :(2)初步认识angular2,不一样开发模式

基础概念 官方中文社区一把梭: 你想要都概念基本可以在这里找到。 angular-cli 启动 src是开发目录,生产打包后会产生一个dist目录; 初步说下你从启动到浏览器看到app works!.../app/app.module'; // 环境配置文件,可以写入接口路径什么。。dev,prod各一份 import { environment } from '....:组件逻辑处理 // 导入装饰器:装饰器可以理解为一些函数封装,使其书写起来非常简洁明了 import { Component } from '@angular/core'; @Component...'@angular/platform-browser'; // 这也是一个装饰器,用来定义模块和组件相关,比如服务,组件元素,指令,导入导出模块识别 // 每个模块定义必须有这个才能生效...,ng2开发模式就是类似一个树,从根节点无限发散 import { NgModule } from '@angular/core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定

9210

Angular2 :从 beta 到 release4.0 版本升级总结

它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。...组件迁移后,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...升级angular-cli版本失败 原因:angular-cli版本升级后,对应webpack版本修改了默认disableHostCheck属性,导致ng serve --port会出现Invalid...解决办法:目前路由事件结束(NavigationEnd)时,手动更新组件状态。 内嵌样式失效。"...使用angular-cli后无法自定义webpackalias, 导致文件引入路径很长,如../../../shared/。

8.1K00

Angular 2.x折腾记 :(1)初识Angular-cli及脱坑要点

什么是angular-cli 简言之:就是NG团队自行维护一个项目脚手架[内置单元测试及webpack打包工具等],这货前身是ember-cli; 官网 / Github 吐槽 我最早是从Angular...正式版配置稍微有些改动,我比较了下基本不大,放心使用 系统环境配置 window 安装lts版本nodejs v6.10.0 , Angular-clinode-sass不支持7.x,装不上...新建一个组件 Directive ng g directive my-new-directive 新建一个指令 Pipe ng g pipe my-new-pipe 新建一个管道 Service ng...e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix -...有时候我们想要改源文件或者看到原始配置是怎么样这货就用到了 生成目录树小解释 总结 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了。

11810

Angular2学习笔记

(注意node版本一定要是6以上,否则会报奇奇怪怪错); 安装angular-cli (npm install -g @angular/cli); 新建项目 (ng new PROJECTNAME...包括属性绑定、事件绑定、插值绑定以及双向绑定,主要用于组件变量页面显示以及页面等。 服务。这包括两方面,一个是访问RESTFUL服务,另一个是用来保存本地变量。...项目发布 如果是测试环境,直接ng serve就可以用node服务器本地默认4200端口显示页面了。...但是他也有很多缺点,Angular2文档列举了下面几点: 渲染得更快; 需要异步请求更少; 需要下载Angular框架体积更小; 提早检测模板错误; 更安全; 于是,Angular2又提出了一个新编译方法叫...不过对于真正生产环境我们显然不能用node服务器,我这里用是nginx来部署,具体步骤如下: 使用命令ng build --prod --aot来生成dist/文件夹。

2K10

Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

正式版配置稍微有些改动,我比较了下基本不大,放心使用 ---- 安装之前 window下: 安装lts版本nodejs[6.10.0] , Angular-clinode-sass不支持7.x,...---- 初始化项目 angular-cli可以初始化ng2或者ng4项目,我这里说2+; 脚手架命令很多,我这里只列出最常用; 新建东东 范围 命令 作用 new ng new new_project...初始化新项目 Component ng g component my-new-component 新建一个组件 Directive ng g directive my-new-directive 新建一个指令...ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题 ---- 启动 ng serve: 启动脚手架服务,默认端口...有时候我们想要改源文件或者看到原始配置是怎么样这货就用到了 ---- 生成目录树小解释 ? ---- 总结 这个脚手架支持sass和less,手动改下.angular-cli.json就可以了。

1.8K10

模块化开发 Angular 应用

我们通过 angular-cli生成一个基本 AppModule。...使用下面的命令行去生成一个新模块文件。 ng generate module [name] 复制代码 一个 Angular Module 是什么?...就像组件一样,生成结构是一个模块树。 @NgModule @NgModule 操作符里面,我们定义模块所有属性。我们提供了一个简单 JavaScript 对象作为参数。...如果你想在多个模块中使用你组件,你需要将改组件捆绑到一个单独模块,并将其导入到模块。 Imports 说到导入... 你模块可以导入任意数量子模块。还没有定义任何自定义模块?...如果我们想在特定路由上延迟加载模块,我们可以使用 loadChildren 属性。这里我们指定模块路径和名称,用 # 分隔开。 之后,我们可以我们 AppModule 中导入配置模块。

3K10

Angular入门,开发环境搭建,使用Angular CLI创建你第一个Angular项目

前言:   最近一直使用阿里NG-ZORRO(Angular组件库)开发公司后端管理系统,写了一段时间Angular以后发现对于我们.NET后端开发而言真是非常友善。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件第一轮 ngOnChanges() 完成之后调用,只调用一次。...ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿订阅可观察对象和分离事件处理器,以防内存泄漏。 Angular 销毁指令/组件之前调用。...Angular项目创建并运行: 通过Angular脚手架创建一个新项目: 终端(win+r 输入cmd)打开E:\Angular 文件目录,输入一下命令新建项目: ng new MyAngularProject...直接通过命名运行脚手架搭建项目: ng serve --open ng serve 命令会启动开发服务器、监视文件,并在这些文件发生更改时重建应用。

2.7K20

有了ng-zorro-mobile,ionic4如虎添翼

ionic使用 众所周知,ionic自身也是一个UI框架,涵盖绝大多数常用组件,但有些组件没有或不好用,就要借助第三方组件,现在有了ng-zorro-mobile,对ionic有了极大补充。...ionic中使用ng-zorro-mobile非常简单,先是创建项目,有ionic相关经验对下面几行代码非常熟悉: #全局安装ionic-cli npm install -g ionic #使用ionic-cli...angular-cli): ng add ng-zorro-antd-mobile 使用npm,则先安装模块: npm install ng-zorro-antd-mobile --save 然后 app.modules.ts...,全局引入 ng-zorro-antd-mobile: import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile'; imports...NgZorroAntdMobileModule ] 让我们看下ng-zorro-antd-mobile带来了哪些有用组件,随便截几个图: ? notice ? step ? picker ?

2.6K30
领券