Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›5 »

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

ddiddles posted:

Are you writing ES6?

The first two lines of your error message tell you what messed up. It came across a back tick character it didn't like on line 74, which is used for template strings in ES6.

I dunno, am I? I only say it that way because I'm just following the linked tutorial
I see ` in app.js

code:

const root = document.querySelector('#root')
root.innerHTML = `<p>Hello webpack.</p>`

But the tutorial said to add babel-loader with an es2015 option. Shouldn't that compile it so it works, or am I misunderstanding what that does?

If the back-tick is what it is complaining about, why did webpack --watch work but npm run build not work?
Also, more rhetorical: Why would the tutorial be written in such a way that it won't work even if you follow it?

I'm sorry I ranted earlier (again) I feel "old", like everything is moving too fast and I can't catch up.

# ¿ Feb 3, 2017 22:22

Adbot: ADBOT LOVES YOU

# ¿ May 22, 2024 16:45

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

What do you guys recommend for Angular R&D?
I've still super green on it and trying to find an answer for my question* I either get:
Something Unrelated
The Answer in AngularJS
The Answer in a pre-release of Angular 2 that no longer works.

*The question is, how do I make a <select> where the values and text are just integers. From 1 to X (X i suppose could be hardcoded at 10, but ideally object.max if object.max < 10 (otherwise 10) )

# ¿ Feb 16, 2017 15:57

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

HaB posted:

What version of Angular are you looking for? 2? Angular doesn't care what types your values/text are. You can use ng-options or even ng-repeat to do it.

I'm looking for version 2. Aren't ng-options and ng-repeat AngularJS 1.X things?
I see them done with:

code:

<option *ngFor="let object of objects" [value]="object.value">

but I don't have a list of objects, just a list of numbers. I guess I have to make some new function that returns just a simple list of numbers to satisfy Angular?

# ¿ Feb 16, 2017 16:34

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

dupersaurus posted:

If you already have a list of numbers, then the "object" there is a red herring, it's just iterating over a list. In JS syntax *ngFor is a for...of statement. If you're looking to emulate for (var i = 0; i < x; i++), then yeah you'll have to generate a list and iterate over it.

Thanks yeah, I came to the realization that I'm used to doing what you mentioned, but I have to generate that thing elsewhere then use it.

EDIT: What about my original question of reseourches for R&D (and documentation) I know the angular docs, but not sure how to 'phrase' a question so I'd find it there.

# ¿ Feb 16, 2017 17:19

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

So I'm slowly, slowly learning Angular (2.X).
I'm iterating over some objects: <div *ngFor="let basketitem of basketitems" class="row itemInfo"> but I'd like to sort, and group, by a property. I know sortBy and groupBy were removed from AngularJS because reasons.
I wouldn't know where to start to write my own, but I found angular2-pipes. Trouble is, I don't think I installed it properly.

I went to the folder that contains /app and /node_modules and did npm install ngx-pipes --save, I see it in package.json. Then in app.module.ts I put import {NgPipesModule} from 'ngx-pipes'; and NgPipesModule in the imports array in @NgModule, but when I try to use it, even by copy/pasting the first example in the docs, it gives an error saying it can't find the pipe.

Since I just started learning Angular this is the first plugin I've tried and I know with previous issues I've had with Angular it was just from not importing dependencies properly.

# ¿ Mar 14, 2017 15:34

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Plavski posted:

Is your version of TypeScript up to date? Do you have definition files for that module?

I'm not quite sure how to answer those questions

My package.json says "dependencies": { "ngx-pipes": "^1.4.6", } and "devDependencies": { "typescript": "~2.0.10",}. I see an /ngx-pipes folder in node_modules and I started this project using Angular Quickstart

# ¿ Mar 14, 2017 15:53

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

I'd say they were removed for a good reason... Specifically in Angular 1.x, filtering in the template was 2x as expensive, as it happened during digests and thus, happened at least twice. But from a code maintenance perspective, Angular 1.x tried putting too much logic in the HTML. I'd put your sorting and grouping logic in the controller, and have your template iterate over that, it'll make it a lot easier to tweak later on.

I understand the reasoning, but given how new I am to Angular I'm having trouble actually doing it

# ¿ Mar 14, 2017 17:13

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

Put a get property on your controller like so
code:
public get filtered_basketitems(): IBasketItems[] {
	return this.basketitems.filter().sort().group();
}
Then change your template to <div *ngFor="let basketitem of filtered_basketitems" class="row itemInfo">

This will then request your new filtered collection upon every digest, but at least your code is in plain JS. To be even more picky about performance, you can have a collection on the controller as you do now, but specific functions that alter it, so you only perform filtering/sorting/grouping when someone clicks a button or changes something. This is much more efficient, but requires diligence.

OK so I should roll my own rather than using a plugin? (which incidentally did seem to work with angular-cli but only as far as importing, still errors, yay)
When I try what you suggest:

code:

missing argument 0 when calling function Array.prototype.filter

# ¿ Mar 14, 2017 18:09

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Skandranon posted:

Sorry... I was being a bit brief, filter().sort().group() aren't real functions... I guess it would look more like this.basketitems.filter(b => b.thingIWant).sort((a,b) => a.sortField > b.sortField). Probably some good grouping methods in lodash.

Oh I see, just pass the original array and output another? Well I got sorting working, but that grouping.
I can't wait until I'm done to share my findings because it seems I'm the first person in the world to want to do something in Angular that was built-in to AngularJS.

EDIT: Looks like I can pause this anyway since upon doing so, I realized a bunch of possibilities that we don't have requirements for.

The Merkinman fucked around with this message at 21:17 on Mar 14, 2017

# ¿ Mar 14, 2017 20:09

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Why are you talking about Angular 2? It's 4 now.

Also I think it's great that Angular, written by Google, has terrible SEO.

# ¿ Apr 1, 2017 14:40

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

The issue comes from (I believe)..
iPhone came out, and supported the whole web (well sans-flash) and since a lot of UI depended on :hover, they treated :focus like :hover.
I believe Android did the same thing, but as websites started getting designed for touch, Android went the expected behavior of :focus being :focus.
Apple has yet to update iOS Webkit to the expected behavior and maybe never will for fear of 'breaking the Internet' like when IE finally went more in line with standards.

# ¿ Apr 6, 2017 14:07

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

We've started transitioning to using Docker.

Because of that, and the fact that I do my development on Windows 10 (to reflect the environment our average non-mobile customer uses), I can no longer use VirtualBox to test other versions of IE, preview versions of Windows 10 and also Linux just because I use it at home.
I looked up some thing about Docker Toolbox but don't know if that's even what I'd want for my use case.
I also tried Microsoft's Hyper-V, but I get an error Failed to create a new virtual machine, even when using their image!

I'm sure other people in here have a combo of Windows+Docker+need to test other OSs, right??
What do you recommend? (don't say just use Linux/Mac as I then wouldn't be using what our average customer does!)

# ¿ Apr 26, 2017 13:59

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

The Fool posted:

I just use Hyper-V. Do you have local admin?

I think so, I even tried running Hyper-V as admin. No Dice.

EDIT:
OK if I use the normal "New" option instead of "Quick Create" I'm able to make one....but it doesn't have any internet access.

The Merkinman fucked around with this message at 13:54 on Apr 27, 2017

# ¿ Apr 26, 2017 22:33

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Some people here wanted to use AMP because of buzzword, when I told them it meant they couldn't have all the custom JavaScript we have/"need" on our product pages, they backed off.
I could very much see it for a very read-only/article based website though.

Since there is some downtime in my main project, I'm getting back into Webpack. I'm going through the Guides and was starting to pick it up until I tried Cleaning the /dist folder. That whole page is poor, look at the supposed diffs throughout that page alone, they're clearly missing stuff.* As such, I'm sure I'm missing stuff so webpack won't compile now.

index.js

code:

import _ from 'lodash';
import printMe from './print.js';

function component() {
  var element = document.createElement('div');
  var btn = document.createElement('button');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(component());

webpack.config.js

code:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index.html',
            template: 'src/index.html'
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

*first one has import from lodash even though the previous page explicitly said to remove it.
Suddenly, under "Setting up HtmlWebpackPlugin", webpack.config has vendor: ['lodash']
Later, under "Cleaning up the /dist folder", HtmlWebpackPlugin has two more properties of filename and template

# ¿ Jul 13, 2017 18:24

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

The http://stateofjs.com/ survey is open again if you want to join me in expressing mild disdain about parts of the ecosystem

I went to fill that out, but 17 more frameworks came out by the time it was done.

# ¿ Jul 19, 2017 16:07

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

Just when I was about to try {{framework version+1}} for the first time!!!

{{alternative framework}} This does look super sweet. I think.

Anyone want to help me with what I posted earlier about Webpack?
Or should I just wait 5minutes for Webpack 4/ Some other-totally-better-than-Webpack.js to come out?

# ¿ Jul 24, 2017 20:31

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

So the fact that the documentation tutorial on Webpack's site is broken is fine because I shouldn't use Webpack anyway
:thunk:

# ¿ Jul 25, 2017 13:33

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Has anyone read this article comparing Angular, React, and Vue? For those familiar with those frameworks, what are your thoughts?
https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

# ¿ Sep 21, 2017 01:23

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Every time I read this thread, I feel dumb for officially/unofficially deciding on Angular where I work. :sigh:

# ¿ Sep 24, 2017 15:59

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

Also there's only one browser window size: the default size of a new image in Photoshop.

and the only device people use is a 27" Retina iMac

# ¿ Oct 4, 2017 19:12

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

geeves posted:

I would add https://plainjs.com/ for people who have been overly-reliant on jQuery.

http://youmightnotneedjquery.com/ to help people transition.

# ¿ Oct 22, 2017 04:46

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Nolgthorn posted:

I would like to see documentation by the World Wide Web Consortium, which is where language features and standards come from. And I want browser makers like those companies you mentioned to implement those standards properly.

The thing is, often times browser vendors make their browser work with a feature before that feature is 100% finalized by the W3C. This is because the W3C often takes way too long to finalize a standard and how we got the WHATWG.

# ¿ Oct 22, 2017 14:57

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Grump posted:

yeah. This is an app that will potentially be installed on 100s of eCommerce stores, so probably not the best that I'm emitting source maps.

Definitely something I never considered. Thanks!

Just the thing for Cyber Monday!

# ¿ Nov 27, 2017 18:43

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Is it bad to use Angular (or I guess React or Vue) to make an entire site an SPA? By entire site, I mean entire e-commerce site with dozens of different pages.
Is it better to make each type of page (product listing, product, checkout) its own SPA instead?

# ¿ Nov 28, 2017 16:31

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Nolgthorn posted:

I'm at a weird time in my life where I cannot decide between having lots of spinners for all the different things that load everywhere. Or whether there should be one single spinner somewhere always at the same place on the page. Then just have a value that counts up and down the number of different things that are loading to decide whether the spinner should be spinning.

Does any particular thing take far longer than others to load?

# ¿ Dec 5, 2017 15:58

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

It's me, I'm the idiot using Angular

# ¿ Dec 8, 2017 02:08

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

prom candy posted:

Edit: Follow up question for the thread: what tools do you use to collaborate with your designers? Do they write any code? How do you get them thinking in a component/interactive mindset if they design using tools like Sketch?

We use the aforementioned Sketch as well as Zeplin
They don't write code, with the exception of modifying CSS via Stylus. That helps them play around with global changes before even giving it to us in Dev.
Getting into the component mindset I think was largely from a push from the UX team here. Start with basic things like h1 then up to button, eventually going to custom elements. Maybe letting them know it'll be more consistent from a brand standpoint will help? Has there been any particular pushback?
Sketch has "libraries" so it is possible to do components in Sketch.

# ¿ Dec 8, 2017 14:50

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Pollyanna posted:

The designer/product owner I work with - same person - uses Zeplin and sometimes gives me Sketch files, but doesn't give me any actual hard numbers - she expects me to extrapolate it from the designs themselves, and then comes back with a list of (tweaks i.e. pixels and font sizes) to be made after I put the PR up (or the equivalent of a PR in our case). Tickets inevitably take longer to complete as a result

I don't know what the proper way to work with a non-technical designer is for a web developer who touches CSS, Javascript, and numbers. If only Zeplin/Sketch had the sizes, fonts, etc. embedded�in them - but then wouldn't it just be CSS?

If it's inefficient, tell her that you need more documentation and specs before you start, since you always run into this situation of tickets afterwards. Is this something that a Style Guide would help with? (i.e. all <p> are this color, size, margin, etc). When you get the tickets in, maybe ask "Why" it needs to be that way. Not in a manner of questioning her design, but maybe if you figure out her "Why" you can figure out reusable patterns? Those reusable patterns benefit you both.

The designer/product owner being the same person seems like its own issue...

# ¿ Dec 8, 2017 15:58

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

2017 State of JS came out.

# ¿ Dec 13, 2017 14:41

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I'm going to revamp our service worker with Workbox. I've got it up and running, changed the workbox-cli-config.js so it's generating the file, it's also running properly.

Looking at the features of the API, what exactly is precache? How is that different than any of the strategies?

# ¿ Dec 27, 2017 15:56

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

EVIL Gibson posted:

Yep. This is my issue but it's just like someone listed a Defcon video and I understood everything he was talking about because I've seen and taken advantage of similar bugs to get into systems. (framebusting, hijack, etc). Different strokes for different folks.

I guess a better question, is there something like WAMP/LAMP where it blasts down some code and says, go nuts. I know I have to run a server to develop it.

What are you looking to make? A single page webapp that does one thing? A small multiple page site, a large one?
While a lot of the things thrown around are subjective, knowing what you intend to build is a start.

# ¿ Dec 30, 2017 22:57

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Questions about Webpack and making a vendor bundle with CommonsChunkPlugin (if that's even what I should use).
If I'm specifying what files go into the bundle, then what is the CommonsChunkPlugin even doing?
Also would I need to still put import $ from jquery at the top of my .js files, or is just having the external reference to vendor.js in the HTML enough?
Source: Webpack Documenation

code:

entry: {
  vendor: ["jquery", "other-lib"],
  app: "./entry"
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",
    // filename: "vendor.js"
    // (Give the chunk a different name)

    minChunks: Infinity,
    // (with more entries, this ensures that no other module
    //  goes into the vendor chunk)
  })
]

# ¿ Jan 22, 2018 14:43

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

The CommonsChunkPlugin can do a few things, which is unfortunate, because it makes it confusing. One use of it is to automatically ensure that common code is in the "main" file if you are creating several small bundles to be served async to users as they use your app. So if they have to load 'home.js', 'about.js', and 'fart.js' as they hit those routes in your app, then any code that is in more than one will be moved "up" into the parent bundle for you instead of bloating three bundles. That is not your use case though!

The other thing CommonsChunkPlugin can do for you is to take modules you tell it to and make them their own bundle. This is your use case, and what your example webpack config will do. So when building, if Webpack sees import $ from 'jquery' or import { blah } from 'other-lib' in your code, it will take note to put those imports into the vendor.js file instead of your main bundle. And yes, you will still need to use import statements in your code to use them.

If you don't want to manually add your dependencies in your config, you can just read them out of your package.json like so:
JavaScript code:
// webpack.js


const pkg = require('./package.json');
const deps = Object.keys(pkg.dependencies);

module.exports = {
    entry: {
        bundle: './src/client.js',
        vendor: deps
    },
    // rest of config ....
}

OK so actually my specific use case is more like

code:

...
entry: {
  vendor: ["jquery", "other-lib"],
  page1: "./page1",
  page2: "./page2",
  page3: "./page3", 
}
...

But still, I'd put import $ from 'jquery' and/or import blah from 'other-lib' at the top of page1, page2, and page3 (if necessary) as well as have a reference to vendor.js in the HTML and CommonsChunkPlugin will know that import $ from 'jquery' doesn't mean to add it to the file, but look in the separate vendor.js?

Would jquery just be the jquery.min.js I get from their site ( but locally hosted), or would it be the npm package? What's the use case in one vs the other?

# ¿ Jan 22, 2018 16:27

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

Correct. You'll still need to import in your code wherever you use those libraries, and Webpack will make sure that the page*.js bundles know about where they live in vendor.js

I have never used jQuery with webpack (or at all in a while!) but my guess is you'd use the npm module of it: https://www.npmjs.com/package/jquery If you use it as an external script, then all your es6 code will have to magically know that this global variable called "$" exists and not to explode in transpiling.

Thank you, turns out I was on the right track!

Lumpy posted:

The CommonsChunkPlugin can do a few things, which is unfortunate, because it makes it confusing.

That is still very true

EDIT: I'd like for us to stop using jQuery too. Having import $ from 'jquery' in the file itself is a good way to tell the developer "hey you should probably refactor this file to not need jQuery".

The Merkinman fucked around with this message at 17:55 on Jan 22, 2018

# ¿ Jan 22, 2018 17:21

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Knifegrab posted:

What is the most modern and best solution to have two divs that are side by side, switch to being above/below one another depending on size of browser (responsive)

CSS Grid.
It's the most modern, but really any other suggestion would depend on what is sizing the divs, and when you want them to stack.

# ¿ Jan 26, 2018 20:57

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

Counterpoint: Flexbox. Better support, and probably easier to implement.

Knifegrab asked for "most modern" :v:

Webpack 3 question.
So I'm having to rewrite some js with stuff like imports and defining variables so it compiles. This is fine and I'm trying to do it bit by bit.
This is basically my code, but I've changed the names of the files.

code:

module.exports = {
  entry: {
    aPage: './js/aPage.js',
    bPage: ' './js/bPage.js',
    cPage: './js/c.ts',
    vendor:['jquery', 'jquery-validation', ''jquery-lazyload']
  },
  module:{
    loaders:[
      {
        test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
        loader: "imports-loader?define=>false"
      }      
    ],
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['/some/filepath/js'])
  ],
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      // filename: "vendor.js"
      // (Give the chunk a different name)
  
      minChunks: Infinity,
      // (with more entries, this ensures that no other module
      //  goes into the vendor chunk)
    })
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '/some/filepath/js')
  }  
};

For some reason the moment my entry point contains a single TypeScript file (./js/c.ts), it Webpack then tries to run through and bundle any TypeScript file it can find. It does not try to do that unless cPage: './js/c.ts', is present. I just want it to try and bundle the file(s) I explicitly mentioned.

Also, Webpack 4 beta, with no CommonsChunkPlugin

# ¿ Jan 29, 2018 15:53

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

darthbob88 posted:

Angular question: My app is refusing to bootstrap because it can't resolve the parameters for my component. So far as I can tell, everything should be resolvable; the services it relies on are all properly typed and decorated with @Injectable(). What else should I look for to troubleshoot this? None of my googling has found a solid answer.

What specifically is the error?
Do you have a component with an @Input that you're not giving a value in the parent?

# ¿ Apr 26, 2018 03:49

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Has anyone successfully tried the new Custom Elements in Angular 6? Anything I find either has bad documentation or doesn't work

# ¿ May 15, 2018 20:32

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Anyone here have experience reading/writing URL parameters with Angular 6?
I tried following some Googling but then I just end up with

code:

Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?)

app.component.ts

code:

import { ActivatedRoute } from '@angular/router';
....
constructor( private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
   }

app.module.ts

code:

...
import { ActivatedRoute } from '@angular/router';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})
export class AppModule { }

# ¿ Jun 8, 2018 19:50

Adbot: ADBOT LOVES YOU

# ¿ May 22, 2024 16:45

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

LOOK I AM A TURTLE posted:

You need to add RouterModule to your imports. Adding ActivatedRoute to providers won't do much on its own because it depends on a bunch of other services, which is what the question marks are telling you about. Those error message could really be better.

If your app has any complexity to it at all you'll probably want to have different routes for different components, so look into https://angular.io/guide/router.

hmm I updated my app.module.ts to have:

code:

...
import { RouterModule, ActivatedRoute } from '@angular/router';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule
  ],
  providers: [ActivatedRoute],
  bootstrap: [AppComponent]
})
export class AppModule { }

I also added it as an import to app.component.ts but it's unused. I don't see it used in the example either.

code:

...
import { Router, ActivatedRoute } from '@angular/router';
...
  constructor(private router: Router, private route: ActivatedRoute) {
...
}

# ¿ Jun 11, 2018 14:45

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›5 »